
import React, { Component } from 'react';
import axios from 'axios';
import {Form,Input, Button,Radio} from 'antd';
import {Invoice} from './Invoice';
import './index.less';
const FormItem = Form.Item;
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
class Buy extends Component{
    constructor(props){
        super(props);
        this.id = props.match.params.productDetailId;
        this.form = props.form;
        this.handleSubmit= this.handleSubmit.bind(this);
        this.databack = this.databack.bind(this)
        this.state={
            prodata:{
                properties:[]
            }
        }
    }
    componentWillMount(){
        axios.get('http://cloud.jss.com.cn/order/toBuy.do?_=1530775338819&productDetailId='+this.id).then((res)=>{
            //这里导致发票信息部分重绘了两次
            this.setState({
                prodata:res.data.productDetail
            })
            this.form.setFieldsValue({
                productDetailId:this.state.prodata.id
            })
        })
    }
    handleSubmit(e){
        e.preventDefault();
        console.log(this.form.getFieldsValue ())
        // ((this.myform)).submit()
    }
    databack(invoiceType,invoiceId){
        this.form.setFieldsValue({
            invoiceType:invoiceType,
            invoiceId:invoiceId
        })
    }
    render(){
        const getFieldDecorator = this.props.form.getFieldDecorator ;
        return(
            <React.Fragment>
                <Form onSubmit ={this.handleSubmit} className="buy-form" layout="inline" ref={(node)=>{this.myform=node}} action="/test.json">
                    <div className="m-box">
                        {
                            getFieldDecorator('productDetailId',{
                                initialValue:''
                            })(<Input type="hidden"/>)
                        }
                    <h3>联系人信息</h3>
                    <FormItem label="联系人">
                    {getFieldDecorator('contact',{
                        initialValue:'刘梦梅',
                        rules:[{
                            required:true,
                            message:'请填写联系人'
                        }]
                    })(<Input autoFocus={true}/>)}
                    </FormItem>

                    <FormItem label="联系方式">
                    {getFieldDecorator('mobile',{
                        initialValue:'18768147259',
                        rules:[{
                            required:true,
                            message:'请填写联系人'
                        }]
                    })(<Input name=""/>)}
                    </FormItem>
                    </div>
                    {/* <h3 className="e-mt20" style={{height:'500px'}}>订单信息</h3> */}
                    <div><span>商品名称</span><span className="e-m110">{this.state.prodata.product_name}</span></div>
                    <div><span>功能名称</span><span className="e-m110">{this.state.prodata.function_name}</span>
                    {
                        this.state.prodata.properties.map((val,key)=>{
                            return (
                                <span key={key} className ="e-ml20">
                                <span>{val.property_name}:&nbsp;</span>
                                <span>{val.number}</span>
                                <span>{val.unit}</span>
                                </span>
                            )
                        })
                    }
                    </div>
                    <div className="line e-mt10"></div>
                    <h3 className="e-mt20">发票信息</h3>
                    <div>
                        {
                            getFieldDecorator('invoiceType',{
                                initialValue:''
                            })(<Input type="hidden"/> )
                        }
                        {
                             getFieldDecorator('invoiceId',{
                                 initialValue:''
                             })(<Input type="hidden"/> )
                             
                        }
                        <Invoice databack={this.databack}/>
                    </div>
                    <div className="line e-mt10"></div>
                    <div className="e-mt20">
                    <FormItem label="我的客户经理">
                    {
                        getFieldDecorator('salesname',{
                            initialValue:''
                        })(<Input/>)
                    }
                    </FormItem>
                    </div>
                    <div className="e-mt20">
                    <FormItem>
                        <Button htmlType="submit" className="ui-button">提交订单</Button>
                    </FormItem>
                    </div>
                        
                </Form>
            </React.Fragment>
        )
    }
}
export default Form.create({})(Buy) ;